<template>
  <div>
    <Title title="注册账号"></Title>
    <div class="scroll">
      <div class="registerForm">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item
            label="用户名"
            prop="name"
          >
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入用户名"
              autocomplete='new-password'
            ></el-input>
          </el-form-item>

          <!-- 昵称 -->
          <el-form-item
            label="昵称"
            prop="nickname"
          >
            <el-input
              v-model="ruleForm.nickname"
              placeholder="请输入昵称"
              autocomplete='new-password'
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item
            label="密码"
            prop="psd"
          >
            <el-input
              type="password"
              v-model="ruleForm.psd"
              autocomplete='new-password'
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item
            label="确认密码"
            prop="checkPass"
          >
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="new-password"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item
            label="手机号"
            prop="tel"
          >
            <el-input
              v-model="ruleForm.tel"
              placeholder="请输入手机号"
            ></el-input>
            <button
              class="yanzheng"
              @click.prevent="getCode"
              v-show='isbtn'
            >获取验证码</button>
            <button
              class="yanzheng"
              @click.prevent="getCode"
              disabled
              v-show='!isbtn'
            >{{m}}:{{s}}</button>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item
            label="验证码"
            prop="Vcode"
          >
            <el-input
              v-model="ruleForm.Vcode"
              placeholder="请输入验证码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
            >立即注册</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 注册 -->
  </div>
</template>
<script>
import Title from "../components/Title.vue";
import { getYanZheng } from "../api/luntan-getmy.js";
import { register } from "../api/luntan-getmy.js";
import { setInterval, clearInterval } from "timers";
// import { Message } from 'element-ui';
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.psd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        nickname: "",
        tel: null,
        Vcode: "",
        psd: "",
        checkPass: ""
      },
      isbtn: true,
      time: null,
      m: 5,
      s: "00",
      rules: {
        name: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ],
        nickname: [
          { required: false, message: "", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        psd: [
          { required: true, validator: validatePass, trigger: "blur" },
          { min: 6, message: "密码长度至少6位", trigger: "blur" }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
          { min: 6, message: "密码长度至少6位", trigger: "blur" }
        ],
        tel: [
          { required: true, message: "输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "输入11位手机号", trigger: "blur" }
        ],
        Vcode: [
          { required: true, message: "输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "输入6位验证码", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    open(msg) {
      this.$message({
        message: msg,
        type: "warning"
      });
    },
    getCode() {
      clearTimeout(this.time);
      // console.log("获取验证码");
      if (Number(this.ruleForm.tel)) {
        getYanZheng(Number(this.ruleForm.tel));
        this.isbtn = false;
        let time = setInterval(() => {
          if (this.s == 0 && this.m !== 0) {
            this.s = 59;
            this.m -= 1;
          } else if (this.m == 0 && this.s == 0) {
            this.isbtn = true;
            clearInterval(time);
          } else if (this.s >= 0 && this.s <= 10) {
            this.s -= 1;
            this.s = "0" + this.s;
          } else {
            this.s -= 1;
          }
        }, 1000);
      } else {
        this.open("请输入手机号");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          register(
            this.ruleForm.name,
            this.ruleForm.nickname,
            this.ruleForm.checkPass,
            this.ruleForm.tel,
            this.ruleForm.Vcode
          ).then(res => {
            // eslint-disable-next-line no-debugger
            debugger
            if (res.msg == "账号重复") {
              // 验证码错误
              this.open("该账号已存在");
            } else if (res.msg == "电话重复") {
              this.open("该手机号已注册");
            } else {
              // 验证码正确，跳到登录页面
              // 111111111111111111111111111111111111111111111111111111111111111111111111111111111
              this.$router.push({
                path: "/home/login"
              });
            }
          });
        } else {
          // console.log("error submit!!");
          this.open("信息格式不对");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  components: {
    Title
  }
};
</script>
<style lang="less" scoped>
.registerForm {
  width: 80%;
  margin: 20px;
}
.yanzheng {
  float: right;
  position: relative;
  top: 5px;
  color: #666;
  margin-bottom: -10px;
}
.scroll {
  overflow: scroll;
}
</style>